<template>
  <div>
    <v-viewer ref="view"></v-viewer>
    <div class="car-area">
      <div class="title">
        <div class="point"></div>
        <span>放款材料</span>
        <el-button @click="down(3)"
                   style="margin-left:50px;"
                   type="primary"
                   size="small">资料下载</el-button>
      </div>
      <div class="customer-area">
        <div class="second-title">
          <div class="point"></div>
          <span>主贷人</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>客户名</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.customerName }}</span>
          </el-col>
          <el-col :span="2">
            <div class="content-title">
              <span>手机号</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.customerPhone }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>产品方名称</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.productName }}</span>
          </el-col>
          <el-col :span="2">
            <div class="content-title">
              <span>产品方订单号</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.productOrderId }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>实际放款额</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.discharge }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>订单详情</span>
            </div>
          </el-col>
          <el-col :span="19">
            <div>
              <pic-view :pic-url-list.sync="orderInfo.productOrder.urls"
                        upload-class="lang-upload"
                        :pic-name-list.sync="orderInfo.productOrder.names"
                        :upload-data="{ picName: 'customer/' + orderInfo.customerId }"
                        :upload-type="isInfo"
                        @showImg="showImg"></pic-view>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>收款确认函</span>
            </div>
          </el-col>
          <el-col :span="19">
            <div>
              <pic-view :pic-url-list.sync="orderInfo.receivables.urls"
                        upload-class="lang-upload"
                        :pic-name-list.sync="orderInfo.receivables.names"
                        :upload-data="{ picName: 'customer/' + orderInfo.customerId }"
                        :upload-type="isInfo"
                        @showImg="showImg"></pic-view>
            </div>
          </el-col>
        </el-row>
        <div class="second-title">
          <div class="point"></div>
          <span>收款账号</span>
        </div>
        <el-row v-for="(item, key) in orderInfo.accounts"
                :key="key"
                class="account-card">
          <el-row :gutter="10">
            <el-col :span="2">
              <div class="content-title">
                <span>户名</span>
              </div>
            </el-col>
            <el-col :span="10">
              <span>{{ item.accountName }}</span>
            </el-col>
            <el-col :span="2">
              <div class="content-title">
                <span>账号</span>
              </div>
            </el-col>
            <el-col :span="10">
              <span>{{ item.accountNumber }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="2">
              <div class="content-title">
                <span>银行</span>
              </div>
            </el-col>
            <el-col :span="10">
              <span>{{ item.bank }}</span>
            </el-col>
            <el-col :span="2">
              <div class="content-title">
                <span>开户行</span>
              </div>
            </el-col>
            <el-col :span="10">
              <span>{{ item.accountBank }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="2">
              <div class="content-title">
                <span>转账金额</span>
              </div>
            </el-col>
            <el-col :span="10">
              <span>{{ item.amount }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="2">
              <div class="content-title">
                <span>身份证</span>
              </div>
            </el-col>
            <el-col :span="19">
              <div>
                <pic-view :pic-url-list.sync="item.idCard.urls"
                          upload-class="lang-upload"
                          :pic-name-list.sync="item.idCard.names"
                          :max-size="2"
                          :upload-data="{ picName: 'customer/' + orderInfo.customerId }"
                          :upload-type="isInfo"
                          @showImg="showImg"></pic-view>
              </div>
            </el-col>
          </el-row>
        </el-row>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.account-card {
  margin: 20px 40px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-radius: 5px;
  background-color: #f5f5f54a;
}
</style>

<script>
import '@/style/common.scss'
import '@/style/info.scss'
import picView from '@/components/pic-viewer-up'
import vViewer from '@/components/v-viewer'
import { api } from '@/api'
import { quillEditor } from 'vue-quill-editor'
import { devBaseURL } from '@/utils/http'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      isInfo: this.infoFlag === '1',
      customer: {},
      orderInfo: {
        productOrder: {
          urls: [],
          names: []
        },
        receivables: {
          urls: [],
          names: []
        },
        accounts: [{
          accountName: '军礼',
          accountNumber: 1234,
          bank: '军礼银行',
          accountBank: '军礼银行',
          amount: 1000000000,
          idCard: {
            urls: [],
            names: []
          }
        }]
      }
    }
  },
  watch: {
  },
  props: {
  },
  components: { vViewer, picView },
  created() {
  },
  methods: {
    down() {
    },
    showImg(url) {
      this.$refs.view.showImg(url)
    }
  }
}
</script>
